<template>
  <div class="work_list_receive_detail form_detail_page" v-loading="isLoading">
    <one-title title="工单详情" @refreshData="refresh"></one-title>
    <el-form ref="formList"
             @submit.native.prevent
             v-if="!isEmpty"
             class="fixed_top_56"
             :model="detailData"
             :rules="rules">
      <two-title title="基本信息"></two-title>
      <div class="from_panel">
        <div class="form_col">
          <el-form-item class="form_item" label="工单编号:" prop="number">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.number"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="工单状态:" prop="status">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.statusLabel"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="工单进度:" prop="status">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.workorderProcessStatusLabel"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <!-- 去掉物料组别 -->
          <!--<el-form-item class="form_item" label="物料组别:" prop="groupType">-->
            <!--<div class="input_wapper">-->
              <!--<el-select v-model="groupTypeId" size="small" multiple placeholder="请选择物料组别">-->
                <!--<el-option-->
                  <!--v-for="item in workorderGroupType"-->
                  <!--:key="item.id"-->
                  <!--:label="item.label"-->
                  <!--:value="item.id">-->
                <!--</el-option>-->
              <!--</el-select>-->
            <!--</div>-->
          <!--</el-form-item>-->
          <el-form-item class="form_item" label="单套产品数量:" prop="singleQuantity">
            <div class="input_wapper">
              <el-input
                v-model.trim.number="detailData.singleQuantity"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="数量:" prop="planQuantity">
            <div class="input_wapper">
              <el-input
                placeholder="请输入内容"
                v-model.trim.number="detailData.planQuantity"
                type="number"
                maxlength="10"
                :disabled="true"
                clearable>
              </el-input>
            </div>
          </el-form-item>
        </div>
        <div class="form_col">
          <el-form-item class="form_item" label="计划开始时间:" prop="planStartTime">
            <div class="input_wapper">
              <el-date-picker
                v-model="detailData.planStartTime"
                type="date"
                size="small"
                value-format="yyyy-MM-dd 00:00:00"
                :editable="false"
                :clearable="false"
                placeholder="选择日期"
                :picker-options="startPicker">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="计划完成时间:" prop="planEndTime">
            <div class="input_wapper">
              <el-date-picker
                v-model="detailData.planEndTime"
                type="date"
                size="small"
                placeholder="选择日期"
                value-format="yyyy-MM-dd 23:59:59"
                :editable="false"
                :clearable="false"
                :picker-options="endPicker"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="重点监控:" prop="isMonitoredId">
            <div class="input_wapper">
              <el-select v-model="detailData.isMonitoredId" size="small" placeholder="请选择是否重点监控">
                <el-option
                  v-for="item in booleanType"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="优先级:" prop="priorityType">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.priorityTypeLabel"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="已拆分数量:" prop="spiltQuantity">
            <div class="input_wapper">
              <el-input
                v-model.trim.number="detailData.spiltQuantity"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
        </div>
      </div>
      <two-title title="其他信息"></two-title>
      <div class="from_panel">
        <div class="form_col">
          <el-form-item class="form_item" label="物料编码:" prop="materialNumber">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.materialNumber"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="物料名称:" prop="materialName">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.materialName"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="图号:" prop="drawingNumber">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.drawingNumber"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="部门名称:" prop="workshopName">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.workshopName"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="统一号:" prop="unitedNumber">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.unitedNumber"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="产品型号:" prop="productNumber">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.productNumber"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="产品名称:" prop="productName">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.productName"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="批次号:" prop="batchNumber">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.batchNumber"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item">
            <label slot="label"></label>
            <div class="input_wapper mes_btn">
              <el-button native-type="submit" type="primary" @click="save">保存</el-button>
              <el-button @click="cancel">取消</el-button>
            </div>
          </el-form-item>
        </div>
        <div class="form_col">
          <el-form-item class="form_item" label="工单来源:" prop="source">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.sourceLabel"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="工单类型:" prop="workorderType">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.workorderTypeLabel"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="任务类别:" prop="taskType">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.taskTypeLabel"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="追溯要求:" prop="trackDemandLabel">
            <div class="input_wapper">
              <el-input
                v-model.trim="detailData.trackDemandLabel"
                :disabled="true">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="form_item" label="备注:" prop="remarks">
            <div class="input_wapper text_area">
              <el-input type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="detailData.remarks"
                        maxlength="255"></el-input>
              <span class="text_length">{{detailData.remarks ? detailData.remarks.length : 0}}/255</span>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <empty-page v-else-if="isEmpty&&!isLoading"></empty-page>
  </div>
</template>

<script>
import TwoTitle from '@/components/TwoTitle'
import {isPositiveInteger} from '../../../../utils/validate'
import EmptyPage from '@/components/EmptyPage'

export default {
  name: 'workListReceiveDetail',
  data() {
    return {
      isLoading: false, // 加载中
      isEmpty: false, // 是否为空数据
      startWatch: false, // 开始监听数据
      // 表单验证规则
      rules: {
        planQuantity: [
          {required: true, message: '请输入数量', trigger: 'change'},
          {validator: isPositiveInteger, message: '只能输入正整数', trigger: 'change'}
        ],
        planStartTime: [
          {required: true, message: '请选择计划开始时间', trigger: 'blur'}
        ],
        planEndTime: [
          {required: true, message: '请选择计划完成时间', trigger: 'blur'}
        ],
        isMonitoredId: [
          {required: true, message: '请选择是否重点监控', trigger: 'change'}
        ],
        remarks: [
          {max: 255, message: '备注长度不能超过255字符', trigger: 'blur'}
        ]
      }
    }
  },
  components: {
    TwoTitle,
    EmptyPage
  },
  computed: {
    // 详情数据
    detailData () {
      return this.$store.state.workListReceive.detailData
    },
    // 重点监控
    booleanType() {
      return this.$store.state.dict.booleanType.labels || []
    },
    // 计划开始日期配置
    startPicker() {
      let self = this
      return {
        disabledDate: (time) => {
          return time.getTime() > self.$endTimeStamp(self.detailData.planEndTime) || time.getTime() < self.$startTimeStamp(window.serverTime)
        }
      }
    },
    // 计划完成日期配置
    endPicker() {
      let self = this
      return {
        disabledDate: (time) => {
          return time.getTime() < self.$startTimeStamp(self.detailData.planStartTime) || time.getTime() < self.$startTimeStamp(window.serverTime)
        }
      }
    },
    // 保存状态
    saveState() {
      return this.$store.state.saveState
    }
  },
  watch: {
    detailData: {
      handler() {
        if (this.startWatch) {
          this.$store.commit('SetHasDetailChange', true)
        }
      },
      deep: true
    }
  },
  mounted () {
    // 获取字典
    this.refresh()
  },
  methods: {
    // 刷新方法
    refresh() {
      this.startWatch = false
      this.isEmpty = false
      this.init()
    },
    // 初始化
    init() {
      let id = this.$route.params.id
      if (!id) return
      this.isLoading = true
      let postData = {
        method: 'get',
        module: 'workListReceive',
        state: 'detailData',
        url: 'a/workorder/workorder/get/' + id
      }
      this.$store.dispatch('saveData', postData).then(res => {
        this.startWatch = true
        if (id && !res) {
          this.isEmpty = true
        } else {
          this.isLoading = false
        }
      }).catch(() => {
        this.isEmpty = true
      })
    },
    // 保存
    save() {
      if (this.saveState === true) return
      this.$refs['formList'].validate((valid) => {
        if (!valid) return false
        this.$store.commit('SetSaveState', true)
        let isMonitored = this.booleanType.find(mItem => mItem.id === this.detailData.isMonitoredId)
        if (isMonitored) {
          this.detailData.isMonitoredLabel = isMonitored.label
          this.detailData.isMonitoredValue = isMonitored.value
        }
        // viewSource 审计属性
        this.detailData.viewSource = 100
        let postData = {
          method: 'post',
          url: 'a/workorder/workorder/save',
          data: this.detailData,
          noCommit: true
        }
        this.$store.dispatch('saveData', postData).then(() => {
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 500,
            center: true,
            onClose: () => {
              this.$store.commit('SetHasDetailChange', false)
              this.$store.dispatch('delCurrentViews', this.$route).then(() => {
                this.$store.commit('SetSaveState', false)
                this.$router.push('/workListReceive')
                this.$store.commit('SetRefresh', true)
              })
            }
          })
        }).catch(() => {
          this.$store.commit('SetSaveState', false)
        })
      })
    },
    // 取消
    cancel() {
      this.backToList().then(() => {
        this.$store.dispatch('delCurrentViews', this.$route).then(() => {
          this.$router.push('/workListReceive')
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
  .work_list_receive_detail{
    .from_panel:last-child {
      padding-bottom: 20px;
    }
  }
</style>
